<template>
  <div class="manage-container">
    <div class="table-wrapper">
      <div class="top-bar-row">
        <div class="search-bar">
          <a-input-search v-model:value="searchText" placeholder="请输入商品名称" enter-button="搜索" @search="onSearch"
            style="width: 300px;" />
        </div>
        <a-button type="primary" @click="goHome">返回</a-button>
      </div>
      <a-table :columns="columns" :data-source="goods" row-key="id" :loading="loading" bordered :pagination="false">
        <template #good-img="{ record }">
          <img :src="record.picture" class="good-img" />
        </template>
        <template #seller-avatar="{ record }">
          <img v-if="record.seller?.avatar" :src="record.seller.avatar" class="good-img" />
          <span v-else>-</span>
        </template>
        <template #action="{ record }">
          <a-popconfirm title="确定要下架该商品吗？" ok-text="确定" cancel-text="取消" @confirm="() => handleOut(record.id)">
            <a-button type="danger">下架</a-button>
          </a-popconfirm>
        </template>
      </a-table>
      <div class="table-pagination">
        <a-pagination :current="pagination.current" :page-size="pagination.pageSize" :show-total="showTotal"
          :total="pagination.total" show-size-changer :page-size-options="['5', '10', '20', '50']"
          @change="onPageChange" @showSizeChange="onPageSizeChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getManageList, outManGood } from '@/service/module/manage/manage';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';

const showTotal = (total: number) => `共 ${total} 条`;

const goods = ref<any[]>([]);
const loading = ref(false);
const searchText = ref('');

const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
});

const columns = [
  {
    title: '商品图片',
    dataIndex: 'picture',
    key: 'picture',
    slots: { customRender: 'good-img' }
  },
  { title: '商品名称', dataIndex: 'title', key: 'title' },
  { title: '成色', dataIndex: 'category', key: 'category' },
  { title: '价格', dataIndex: 'price', key: 'price' },
  {
    title: '卖家',
    dataIndex: 'sellerAvatar',
    key: 'sellerAvatar',
    slots: { customRender: 'seller-avatar' }
  },
  {
    title: '卖家昵称',
    dataIndex: 'seller',
    key: 'seller',
    customRender: ({ record }) => record.seller?.name || '-'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    slots: { customRender: 'action' }
  }
];

const router = useRouter();
const goHome = () => {
  router.push('/');
};

const fetchGoods = async () => {
  loading.value = true;
  const params = {
    pageNo: pagination.value.current,
    pageSize: pagination.value.pageSize,
    description: searchText.value.trim()
  };
  const res = await getManageList(params);
  goods.value = res.data?.records || [];
  pagination.value.total = res.data?.totalRecords || 0;
  loading.value = false;
};

const handleOut = async (id: string) => {
  await outManGood(id);
  message.success('下架成功');
  fetchGoods();
};

const onPageChange = (page: number) => {
  pagination.value.current = page;
  fetchGoods();
};

const onPageSizeChange = (current: number, size: number) => {
  pagination.value.pageSize = size;
  pagination.value.current = 1;
  fetchGoods();
};

const onSearch = () => {
  pagination.value.current = 1;
  fetchGoods();
};

onMounted(() => {
  fetchGoods();
});
</script>

<style lang="less" scoped>
.manage-container {
  padding: 24px;
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.table-wrapper {
  width: 90%;
  min-width: 720px;
}

.good-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;

}

.table-pagination {
  margin-top: 20px;
  text-align: right;
}

.top-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.search-bar {
  margin-bottom: 12px;
}
</style>
